<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <!--    引入默认的样式-->
    <link rel="stylesheet" href="{% static 'users/bulma.css' %}">
    <!--    引入另外的样式-->
    <link rel="stylesheet" href="{% static 'users/style.css'%}">
    <!--    引入js文件-->
    <script src=" {% static 'users/js/all.min.js' %}"></script>
</head>
<body>
<!--头部导航-->
<nav class="navbar">
    <!--    居中显示-->
    <div class="container">
        <div class="navbar-brand">
            <a href="\" class="navbar-item">
                <!--                    设置导航栏图片-->
                <img src="{% static 'users/images/mylogo.png' %}" width="112" height="28" alt="logo">
            </a>
            <!--                设置导航栏样式-->
            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
               data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarBasicExample" class="navbar-menu">
            <!--                    navbar-end表示这个会出现在导航栏最右侧-->
            <div class="navbar-end">
                <div class="navbar-item">
                    <!-- 一个下拉菜单，鼠标移入的时候显示div-->
                    <div class="dropdown is-hoverable">
                        <div class="dropdown-trigger">
                            <button class="button is-white">
                                <figure class="image is-24x24">
                                    {% if user.userprofile.image %}
                                    <!-- 存在显示自己的图像，class=" is-rounded"显示成圆的-->
                                    <!--查看models.py中，信息是一对一关联的，如果不存在，就会不显示，需要加上一个判断-->
                                    <img class=" is-rounded" src="{{ MEDIA_URL }} {{ user.userprofile.image }}"
                                         alt="" srcset="">
                                    {% else %}
                                    <!-- 如果图像不存在，就显示一个默认图像-->
                                    <img class=" is-rounded" src="{% static 'users/images/avatar.jpg' %}" alt=""
                                         srcset="">
                                    {% endif %}
                                </figure>&nbsp;&nbsp;
                                <!--                                        显示用户的昵称，如果昵称不存在，就显示邮箱-->
                                {% if user.userprofile.nick_name %}
                                <span class="has-text-grey-dark">{{ user.userprofile.nick_name }}</span>
                                {% else %}
                                <span class="has-text-grey-dark">{{ user.username }}</span>
                                {% endif %}
                                <!--添加一个下拉的样式-->
                                <span class="icon is-small">
                                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                                    </span>
                            </button>
                        </div>
                        <!--设置下拉框-->
                        <div class="dropdown-menu" id="dropdown-menu2" role="menu">
                            <div class="dropdown-content is-shadowless">
                                <div class="dropdown-item">
                                    <a class="has-text-grey-dark" href="">
                                            <span class="icon is-small">
                                                <i class="fas fa-user-cog" aria-hidden="true"></i>
                                            </span>&nbsp;&nbsp;
                                        账号设置
                                    </a>
                                </div>
                                <hr class="dropdown-divider">
                                <div class="dropdown-item">
                                    <a class="has-text-grey-dark" href="">
                                            <span class="icon is-small">
                                                <i class="fas fa-user-cog" aria-hidden="true"></i>
                                            </span>&nbsp;&nbsp;
                                        退出登录
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</nav>
</body>
</html>